<template>
  <div class="page">
    <h1>继续上次学习</h1>
    <p>这里是继续学习页面占位。</p>

    <!-- 演示按钮：点击后模拟跳转到最近课程 -->
    <el-button type="primary" size="small" @click="resumeLastCourse">
      继续最近课程
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

/**
 * 小白注释：组件命名
 * 做了什么：给组件明确的多词名 ContinueLearningView；
 * 为什么：遵守 ESLint 规则，避免与浏览器原生标签冲突（比如 <menu>）。
 */
defineOptions({ name: 'ContinueLearningView' })

const router = useRouter()

/**
 * 小白注释：恢复最近课程（演示版）
 * 做了什么：假装从本地或后端读取“最近一次学习的课程ID”，然后跳转到课程详情页；
 * 当前先用固定ID演示流程，后续你可以改成真实的 lastCourseId。
 * 使用方法：点击页面上的“继续最近课程”按钮触发。
 */
const resumeLastCourse = () => {
  const lastCourseId = 'demo-101' // 小白注释：占位ID，后续接入真实数据
  router.push(`/course/${lastCourseId}`)
}
</script>

<style scoped>
.page { padding: 24px; }
</style>